<!DOCTYPE html>
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
 
        /*侧边栏*/
        .nav{
            position: fixed;
            top: 50px;
            left:30px;
            width: 180px;
            height: 330px;
            background-color:#486f90;
            z-index: 100;
            color: white;
        }
        .nav li:first-of-type{
            padding-top: 5px;
        }
        .nav li:last-of-type{
            border: none;
            padding-bottom: 5px;
        }
        .nav>li{
            font-size: 20px;
            text-align: center;
            height: 45px;
            line-height: 45px;
            border-bottom: 1px solid white;
            cursor:pointer;
        }
        .center{
            width: 85%;
            height: 100%;
            float: right;
        }
        .center .center-nav{
            text-align: center;
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 28px;
            background-color:brown;
            color: #ffffff;
        }
        .now{
             background: white;
             color: black;
             border: 1px solid white;
         }
               iframe{
            /*height:1080px;*/
         }
    </style>
</head>
<body style="background-color:lightblue;">
<ul class="nav">
    <li id="one" >韩国馆</li>
    <li id="two" >日本馆</li>
    <li id="three">澳新馆</li>
    <li id="four">德国馆</li>
    <li id="five">美国馆</li>
    <li id="six">英国馆</li>
    <li id="seven">泰国馆</li>
</ul>
<div class="center" >
    <div class="center-nav" id="one1">韩国馆</div>
    <iframe id="test"  width="100%"  height="100%"  scrolling="no"  onload="iframeAutoFit(document.getElementById('test'));" frameborder="0"  src="./request.php?url=http://store.steampowered.com/"></iframe>  

    <div class="center-nav" id="two2">日本馆</div>
    <iframe id="web2"  width="100%"  scrolling="no"  onload="iframeAutoFit(document.getElementById('web2'));" frameborder="0"  src="./request.php?url=http://community.itbbs.cn/thread/758159/"></iframe>
    <!--<div id="viewDiv2" ></div>-->

    <div class="center-nav" id="three3">澳新馆</div>
    <iframe id="web3"   onload="iframeAutoFit(document.getElementById('web3'));" width="100%" src="./request.php?url=http://www.phpchina.com/" scrolling="no" frameborder="0"></iframe>

    <div class="center-nav" id="four4">德国馆</div>
    <iframe id="web4"   onload="iframeAutoFit(document.getElementById('web4'));"  width="100%"  scrolling="no" frameborder="0"  src="./request.php?url=http://bbs.qcloud.com/forum.php?mod=viewthread&tid=48234&highlight=php"></iframe>

    <div class="center-nav" id="five5">美国馆</div>
    <iframe id="web5"  width="100%"  scrolling="no"  onload="iframeAutoFit(document.getElementById('web5'));" frameborder="0"  src="./request.php?url=http://bbs.qcloud.com"></iframe>

 <div id="mei"></div>

    <div class="center-nav" id="six6">英国馆</div>
    <iframe id="web6"   onload="iframeAutoFit(document.getElementById('web6'));"  width="100%"  scrolling="no" frameborder="0"  src="./request.php?url=https://activity.huaweicloud.com/"></iframe>

    <div class="center-nav" id="seven7">泰国馆</div>
    <iframe id="web7"  onload="iframeAutoFit(document.getElementById('web7'));"   width="100%"  scrolling="no" frameborder="0"  src="http://www.baidu.com/"></iframe>

</div>

<script type="text/javascript">


    function winH1(){
        $("#web1").css("height",$(window).height())
    }
    function winH2(){
        $("#web2").css("height",$(window).height())
    }

//    跳转 添加导航样式
    $(document).ready(function() {
        $("#web1").contents().find("body").height()
//        winH1()
        $("#one").click(function() {
            $("#one").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#one1").offset().top }, {duration: 500,easing: "swing"});
            return false;

            });
//        winH2()
        $("#two").click(function() {
            $("#two").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#two2").offset().top }, {duration: 500,easing: "swing"});
            return false;
            });
        $("#three").click(function() {
            $("#three").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#three3").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#four").click(function() {
            $("#four").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#four4").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#five").click(function() {
            $("#five").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#five5").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#six").click(function() {
            $("#six").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#six6").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
        $("#seven").click(function() {
            $("#seven").addClass("now").siblings().removeClass("now")
            $("html, body").animate({
                scrollTop: $("#seven7").offset().top }, {duration: 500,easing: "swing"});
            return false;
        });
    });
</script>


<!-- 设置 iframe 自适应 -->
<script language="javascript"> 

    function iframeAutoFit(iframeObj){ 
        setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight); console.log("test")},200) 
    }
</script> 


</body>
</html>